<!DOCTYPE html>
<html>

<head>
    <title>Leaflet.ShowHideLayerGroup</title>
    <meta charset="utf-8" />
    <!-- 引入leafletapi -->
    <link rel="stylesheet" href="../lib/leaflet/leaflet.css" />
    <script src="../lib/leaflet/leaflet.js"></script>

    <!--引入proj4，百度地图用-->
    <script src="../lib/leaflet/plugins/proj4.js"></script>
    <script src="../lib/leaflet/plugins/proj4leaflet.min.js"></script>
    
    <!-- 引入互联网地图插件 -->
    <script src="../lib/leaflet/plugins/leaflet.ChineseTmsProviders.js"></script>
    <!-- 
        互联网地图纠偏插件
        需配合 leaflet.ChineseTmsProviders.js 插件使用
        无需js代码，引用后自动纠偏
        纠偏后的坐标为WGS84
    -->
    <script src="../lib/leaflet/plugins/leaflet.mapCorrection.min.js"></script>

    <style>
        body {
            margin: 0;
        }

        .map {
            position: absolute;
            height: 100%;
            right: 0;
            left: 0;
        }

        .menuBar {
            position: relative;
            text-align: center;
            top: 10px;
            margin: 0 50px;
            padding: 5px;
            border-radius: 3px;
            z-index: 999;
            color: #ffffff;
            background-color: rgba(0, 168, 0, 1);
        }
    </style>
</head>

<body>
    <div class="map" id="bdmap"></div>
    <div class="map" id="map"></div>
    <div class="menuBar">
        互联网地图纠偏:
		<input type="button" value="百度地图" onclick="showBaiduMap()" />
		<input type="button" value="高德地图" onclick="showGaodeMap()" />
		<input type="button" value="天地图" onclick="showTiandituMap()" />
		<input type="button" value="谷歌地图" onclick="showGoogleMap()" />
		<input type="button" value="Geoq地图" onclick="showGeoqMap()" />
		<input type="button" value="OpenStreeMap地图" onclick="showOsmMap()" />
    </div>
    <script>

        //注意：
        //百度地图是无法和其它地图联动的，但独立使用没有问题。
        //这个示例目的是体现多个地图纠偏后的效果。

        var map = L.map('map', {
            center: [39.905530, 116.391305],
            zoom: 17,
            layers:[]
        });
        var bdmap = L.map('bdmap', {
            center: [39.905530, 116.391305],
            zoom: 17,
            crs: L.CRS.Baidu,
            layers:[]
        });
        
        //添加高德地图
        var baiduMap = L.tileLayer.chinaProvider('Baidu.Normal.Map').addTo(bdmap);
        var gaodeMap = L.tileLayer.chinaProvider('GaoDe.Normal.Map').addTo(map);
        var tdtMap = L.tileLayer.chinaProvider('TianDiTu.Normal.Map',{key:'fb258b4c0bbf60ff7a0205b519ad9a96'}).addTo(map);
        var tdtMapLabel = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion',{key:'fb258b4c0bbf60ff7a0205b519ad9a96'}).addTo(map);
        var googleMap = L.tileLayer.chinaProvider('Google.Normal.Map').addTo(map);
        var geoqMap = L.tileLayer.chinaProvider('Geoq.Normal.Map').addTo(map);
        var osmMap = L.tileLayer.chinaProvider('OSM.Normal.Map').addTo(map);

        function showBaiduMap(){
            clear()
            baiduMap.setOpacity(1)
            document.getElementById('bdmap').style.visibility = ''
        }

        function showGaodeMap(){
            clear()
            gaodeMap.setOpacity(1)
            document.getElementById('map').style.visibility = ''
        }
        
        function showTiandituMap(){
            clear()
            tdtMap.setOpacity(1)
            tdtMapLabel.setOpacity(1)
            document.getElementById('map').style.visibility = ''
        }
        
        function showGoogleMap(){
            clear()
            googleMap.setOpacity(1)
            document.getElementById('map').style.visibility = ''
        }
        
        function showGeoqMap(){
            clear()
            geoqMap.setOpacity(1)
            document.getElementById('map').style.visibility = ''
        }
        
        function showOsmMap(){
            clear()
            osmMap.setOpacity(1)
            document.getElementById('map').style.visibility = ''
        }

        function clear(){
            baiduMap.setOpacity(0)
            gaodeMap.setOpacity(0)
            tdtMap.setOpacity(0)
            tdtMapLabel.setOpacity(0)
            googleMap.setOpacity(0)
            geoqMap.setOpacity(0)
            osmMap.setOpacity(0)
            
            document.getElementById('bdmap').style.visibility = 'hidden'
            document.getElementById('map').style.visibility = 'hidden'
        }

        //设置参照物
        L.marker([39.905530,116.391305]).addTo(map).bindPopup('<p>我是WGS84坐标下，天安门广场国旗所在位置</p>').openPopup();
        L.marker([39.905530,116.391305]).addTo(bdmap).bindPopup('<p>我是WGS84坐标下，天安门广场国旗所在位置</p>').openPopup();

        


    </script>
</body>

</html>